﻿<template>
  <section class="guides-view">
    <header>
      <h2>健康指南库</h2>
      <p>基于薄荷健康的临床研究与用户案例沉淀，为你创建专业的生活方式。</p>
    </header>
    <ElRow :gutter="20" class="guide-grid">
      <ElCol
        v-for="guide in resolvedGuides"
        :key="guide.id"
        :xs="24"
        :sm="12"
        :lg="8"
      >
        <ElCard shadow="hover" class="guide-card">
          <img v-if="guide.image" :src="guide.image" :alt="guide.title" class="guide-cover" />
          <header class="guide-header">
            <ElIcon>
              <component :is="guide.iconComponent" />
            </ElIcon>
            <h3>{{ guide.title }}</h3>
          </header>
          <ul>
            <li v-for="tip in guide.tips" :key="tip">{{ tip }}</li>
          </ul>
        </ElCard>
      </ElCol>
    </ElRow>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElRow, ElCol, ElCard, ElIcon } from 'element-plus';
import { Edit, Guide, DataAnalysis, CoffeeCup } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';

const contentStore = useContentStore();
const { guides } = storeToRefs(contentStore);

const iconLookup = {
  edit: Edit,
  guide: Guide,
  data: DataAnalysis,
  coffee: CoffeeCup,
};

const resolvedGuides = computed(() =>
  guides.value.map((guide) => ({
    ...guide,
    iconComponent: iconLookup[guide.icon as keyof typeof iconLookup] ?? Guide,
  })),
);
</script>

<style scoped>
.guides-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.guide-grid {
  width: 100%;
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.guide-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.guide-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

ul {
  margin: 0;
  padding-left: 18px;
}
</style>
